<template>
  <div class="view">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="组织" name="first">
        <div class="content">
          <div class="left">
            <div class="name">{{ teamDetailData.name }}</div>
            <div class="detail">
              <div class="label">所属上级：<span>{{ teamDetailData.parentName||'--' }}</span></div>
              <!-- <div v-if="teamDetailData.teamType==='group'" class="label">
                班组状态：<span>{{ teamDetailData.group||'--' }}</span>
              </div> -->
              <div class="label">创建时间：<span>{{ teamDetailData.createAt }}</span></div>
              <div class="label">修改时间：<span>{{ teamDetailData.updateAt }}</span></div>
              <div class="label">描述：<span>{{ teamDetailData.description }}</span></div>
            </div>
          </div>
          <div class="right">
            <div v-permission="['team:create']" class="btn" @click="dialogTop('add')">添加组织</div>
            <div v-permission="['team:edit']" class="btn" @click="edgeDialog">编辑组织</div>
            <div v-permission="['team:delete']" class="btn" @click="dialogDelVisible=true">删除组织</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户" name="second">
        <div>
          <organization-user
            v-if="userBoolean"
            :team-object.sync="teamDetail"
            :team-id.sync="teamDetail.id"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 添加,编辑组织 -->
    <el-dialog :title="diaDelOrAdd?'添加组织':'编辑组织'" :visible.sync="dialogFormVisible" :close-on-click-modal="false" custom-class="customClass">
      <el-form ref="addForm" :model="addForm" :rules="rules" auto-complete="on" label-position="left" style="width: 97%;">
        <el-form-item label="组织名称：" :label-width="formLabelWidth" prop="name">
          <el-input
            v-model="addForm.name"
            placeholder="请输入名称"
            name="name"
            maxlength="32"
            tabindex="1"
            autocomplete="off"
          />
        </el-form-item>
        <!-- <el-form-item
          v-if="diaDelOrAdd"
          label="组织类型："
          :label-width="formLabelWidth"
          prop="teamType"
        >
          <el-select
            v-model="addForm.teamType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeStatusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item
          v-if="addForm.teamType==='group'"
          label="班组状态："
          :label-width="formLabelWidth"
          prop="status"
        >
          <el-select
            v-model="addForm.status"
            placeholder="请选择"
          >
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="描述：" prop="description" :label-width="formLabelWidth">
          <el-input
            v-model="addForm.description"
            type="textarea"
            resize="none"
            :rows="4"
            placeholder="请输入描述信息"
            name="description"
            maxlength="500"
            tabindex="2"
            auto-complete="off"
          />
        </el-form-item>
      </el-form>
      <div class="footer">
        <div class="cancel" @click="dialogTop('cancel')">
          <span>取消</span>
        </div>
        <div v-if="diaDelOrAdd" class="sure" @click="createData">
          <span>添加</span>
        </div>
        <div v-else class="sure" @click="updataData">
          <span>编辑</span>
        </div>
      </div>
    </el-dialog>

    <delete-dialog
      :dislog-name="teamDetail.name"
      :dialog-del-visible="dialogDelVisible"
      :title="'组织'"
      @funcancl="funcancl"
      @func="deleteData"
    />
  </div>
</template>

<script>
import { getTeamDetail, createTeam, deleteTeam, updataTeam } from '@/api/team'
import DeleteDialog from '@/components/dialog/delete'
import OrganizationUser from './user'
export default {
  name: 'Organization',
  components: {
    DeleteDialog,
    OrganizationUser
  },
  props: {
    teamDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      teamDetailData: {},
      dialogFormVisible: false,
      dialogDelVisible: false,
      typeStatusList: [
        { id: 'company', name: '公司类型' },
        { id: 'group', name: '班组类型' },
        { id: 'other', name: '其他' }
      ],
      statusList: [
        { id: '已离场', name: '已离场' },
        { id: '待入场', name: '待入场' },
        { id: '已进场', name: '已进场' },
        { id: '未进场', name: '未进场' }
      ],
      addForm: {
        parentId: this.teamDetail.id,
        name: '',
        teamType: '',
        status: '',
        description: ''
      },
      formLabelWidth: '120px',
      lablePosition: 'left',
      diaDelOrAdd: false,
      userBoolean: true,
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'change' }
        ]
        // teamType: [
        //   { required: true, message: '必填', trigger: 'change' }
        // ],
        // status: [
        //   { required: true, message: '必填', trigger: 'change' }
        // ]
      }
    }
  },
  computed: {},
  watch: {
    teamDetail: function(value) {
      // this.teamDetail = value
      this.detail(value.id)
    }
  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      this.dialogDelVisible = false
    },
    dialogTop(val) {
      if (val === 'cancel') {
        this.diaDelOrAdd = false
        this.dialogFormVisible = false
      } else {
        this.diaDelOrAdd = true
        this.dialogFormVisible = true
      }
      this.addForm = {
        parentId: this.teamDetail.id,
        name: '',
        teamType: '',
        status: '',
        description: ''
      }
      this.$nextTick(() => {
        this.$refs.addForm.clearValidate()
      })
    },
    edgeDialog() {
      this.diaDelOrAdd = false
      this.dialogFormVisible = true
      this.addForm = {
        id: this.teamDetail.id,
        parentId: this.teamDetail.parentId,
        name: this.teamDetail.name,
        teamType: this.teamDetail.teamType,
        status: this.teamDetail.status,
        description: this.teamDetail.description
      }
      this.$nextTick(() => {
        this.$refs.addForm.clearValidate()
      })
    },
    async detail() {
      const id = this.teamDetail.id
      const res = await getTeamDetail(id)
      if (res.code === 200) {
        this.teamDetailData = res.data
      } else {
        console.log(res)
      }
    },
    createData() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          if (this.addForm.teamType !== 'group') {
            this.addForm.status = ''
          }
          const res = await createTeam(this.addForm)
          if (res.code === 200) {
            this.$parent.treeList()
            this.dialogFormVisible = false
            this.addForm = {
              parentId: this.teamDetail.id,
              name: '',
              description: ''
            }
          } else {
            console.log(res)
          }
        }
      })
    },
    updataData() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          const res = await updataTeam(this.addForm)
          if (res.code === 200) {
            this.$parent.treeList()
            this.dialogFormVisible = false
            this.addForm = {
              parentId: this.teamDetail.id,
              name: '',
              description: ''
            }
          } else {
            this.dialogFormVisible = false
          }
        }
      })
    },
    async deleteData(val) {
      const id = this.teamDetail.id
      const res = await deleteTeam(id)
      if (res.code === 200) {
        this.$parent.treeList()
        this.dialogDelVisible = false
      } else {
        this.dialogDelVisible = false
      }
    },
    funcancl(val) {
      this.dialogDelVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables';
.view{
  margin-left: 15px;
  // background: rgba(0,49,108,0.36);
  .content{
    display: flex;
    .left{
      flex: 1;
      .name{
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
        margin-top: 25px;
      }
      .detail{
        width: 100%;
        .label{
          margin-top: 15px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(247,181,0,1);
          span{
            font-size:14px;
            font-weight:400;
            color:rgba(255,255,255,0.65);
          }
        }
      }
    }
    .right{
      display: flex;
      .btn{
        font-size: 14px;
        height: 36px;
        width: 88px;
        text-align: center;
        font-weight: 400;
        line-height: 17px;
        cursor: pointer;
         background:rgba(247, 181, 0, 1);
        // background: -webkit-gradient(linear, left top, right top, from(rgba(40, 207, 255, 0.4)), to(rgba(14, 154, 221, 0.4)));
        // background: linear-gradient(90deg, rgba(40, 207, 255, 0.4) 0%, rgba(14, 154, 221, 0.4) 100%);
        color: rgba(255,255,255,.8);
        padding: 10px 5px 10px 5px;
        margin-right: 8px;
      }
      .btn:hover{
        background:$btnactiveColor;
        color:rgba(255,255,255,1);
      }
    }
  }
}

</style>
